﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>用户登录</title>
    <link href="http://192.168.112.141/admin/css/bootstrap.css" rel="stylesheet" />
    <link href="http://192.168.112.141/admin/css/base.css" rel="stylesheet" />
</head>
<body style="min-height:800px; height: auto">
	<div class="container-fluid">
		<div class="row" style="margin-top:70px">
			<div class="main-right col-md-4 col-md-offset-4">
				<div class="col-md-12">
					<div class="panel panel-default ">
                        <div class="panel-heading">手机登录</div>
                        <div class="panel-body">
							<div style="color: red" id="error"></div>
                            <form id="login-form" style="padding-top: 20px">
								<input type="hidden" name="articleId" value="${articleId!}"/>
								<div class="form-group">
                                    <input type="text" name="phone" id="phone" class="form-control" placeholder="手机号">
                                </div>
								<div class="input-group">
                                    <input type="text" name="code" class="form-control" placeholder="验证码">
                                    <span class="input-group-btn">
                                        <button class="btn btn-default" id="btn" type="button" onclick="sendCode()">发送验证码</button>
                                    </span>
                                </div>
								<div class="row" style="padding-top:30px">
									<div class="col-md-4 col-md-offset-4" align="center">
										<button type="button" onclick="phoneLogin()" class="btn btn-default">登　录</button>
									</div>
									<div class="col-md-4" align="right">
										<p class="help-block">
											<#if articleId??>
												<a href="/?articleId=${articleId}">账号登录</a>
											<#else>
												<a href="/">账号登录</a>
											</#if>
										</p>
									</div>
								</div>
                            </form>
                        </div>
                    </div>
				</div>
			</div>
		</div>
	</div>
<script src="http://192.168.112.141/js/jquery-2.1.4.min.js"></script>
<script src="http://192.168.112.141/js/bootstrap.min.js"></script>
<script type="text/javascript">
let count = 60;
let timer = null;

//每秒执行的倒计时函数
function countDown() {
	count--;

	if(count == 0){
		$("#btn").text("发送验证码");
		$("#btn").removeAttr("disabled");
		clearInterval(timer);     //清除定时器
	} else {
		$("#btn").text("倒计时" + count + "秒");
	}
}

function sendCode() {
	$.ajax({
		type: 'POST',
		url: '/send_code?phone=' + $("#phone").val(),
		dataType: 'json',
		success:function(data){
			if (data.success) {
				$("#error").empty();
				//倒计时60秒
				count = 60;
				//禁用按钮
				$("#btn").attr("disabled", "disabled");
				//创建一个定时器，每隔一秒执行一次
				timer = setInterval("countDown()", 1000);
			} else {
				$("#error").text(data.message);
			}
		}
	})
}

function phoneLogin() {
	$.ajax({
		type: 'POST',
		url: '/phone_login',
		data: $("#login-form").serialize(),
		dataType: 'json',
		success:function(data){
			if (data.success) {
				//跳转至目标页面
				location.href = data.message;
			} else {
				$("#error").text(data.message);
			}
		}
	})
}
</script>
</body>
</html>